<template>
	<view class="select-item flex f-align">
		<image :src="item.goodsUrl" style="width: 160rpx;height: 160rpx;border-radius: 10rpx;"></image>
		<view class="flex f-column item-right ml20">
			<view class="flex f-align f-justifyB">
				<text class="font36 gray333 text-overflow" style="width: 270rpx;">{{item.goodsName}}</text>
				<view class="del-btn" v-if="isDelete" @click="deleteHandle(item.id)">删除订单</view>
				<view class="red-box" v-else-if="item.isUseDiscounts == '否'">不可使用体验券和次卡</view>
			</view>
			<view class="flex wrap">
				<view class="kind-item">清洗</view>
				<view class="kind-item" v-for="(item,index) in item.projects" :key="index">{{item.projectName}}</view>
			</view>
			<view class="flex f-justifyB f-align mt20">
				<view class="flex f-align-end">
					<text class="font28 blue" style="line-height: 50rpx;">￥</text>
					<text class="font44 red">{{item.goodsMoney}}</text>
				</view>
				<add-reduce v-if="isDelete" :cartId="item.id" :value="item.goodsNumber" @change="getNum" ref="addReduce" :isDelete="isDelete" inputHeight="40rpx" width="60rpx" inputFontSize="30rpx"></add-reduce>
				<text class="font32" v-else>X{{item.goodsNumber}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import addReduce from '@/components/addreduce.vue'
	export default {
		data() {
			return {

			};
		},
		props: {
			ischeck: {
				type: Boolean,
				default: true
			},
			item: {
				type: Object,
				default: {}
			},
			index: Number,
			storeIndex: Number,
			width: {
				default: '100%'
			},
			
			isDelete: false
		},
		components: {
			addReduce
		},
		methods: {
			getNum(event) {
				this.$emit('change', { num: event[0], index: this.index })
			},
			deleteHandle(id) {
				this.$http.ajax({
					url: '/ShoppingTrolley/remove',
					params: {
						ids: id
					}
				}).then((res) => {
					if (res.code == 200) {
						this.$api.msg('删除成功')
						this.$emit('getList')
					} else {
						this.$api.msg(res.msg)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.item-right {
		width: calc(100% - 180rpx);

		.del-btn {
			width: 120rpx;
			height: 36rpx;
			background: #C8C8C8;
			border-radius: 18rpx;
			font-size: 24rpx;
			line-height: 36rpx;
			color: #333333;
			text-align: center;
		}

		.kind-item {
			width: 82rpx;
			height: 32rpx;
			background: #4082FF;
			border-radius: 18rpx;
			font-size: 24rpx;
			line-height: 32rpx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 16rpx;
			margin-right: 20rpx;
		}
		
		.red-box {
			padding: 8rpx 10rpx;
			background: #F9B9BC;
			border-radius: 20rpx;
			margin-right: 10rpx;
			font-size: 20rpx;
			line-height: 20rpx;
			color: #EA4D51;
		}
	}
</style>
